<template>
	<view class="layout">
		<view class="head">
			<view class="title">路线图</view>
			<text class="subTitle">
				请先使用地图软件搜索路线，截图后上传
			</text>
		</view>
		<view class="body">
			<view class="box add" @click="onSelectPic" v-if="pictures.length==0">+</view>
			<view class="box" v-for="item,index in pictures" :key="index">
				<image :src="item.temp" mode="aspectFill"></image>
				<!-- <view class="close">x</view> -->
				<uni-icons class="close" type="close" size="25" @click="onClose"></uni-icons>

				<view class="mask" v-if="item.status == 1" >{{item.progress}}%</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from "dayjs";

const emit = defineEmits(["uploadFileUrl"])



// temp:"", fileID:"", url:"", status:2, progress:0
const pictures = ref([])

// 获取本地文件
const onSelectPic = async()=> {
	let file = await uni.chooseImage({
		count:1,
		sizeType:["compressed"]
	})
	pictures.value = file.tempFilePaths.map(item=>({
		temp: item, status:0, progress:0
	}))
	let fileName = dayjs().format("YYYYMMDD") + "/" + Date.now() + Math.floor(1000 + Math.random() * 900) +".jpg"
	pictures.value[0].status = 1;
	let cloud = await uniCloud.uploadFile({
		filePath: pictures.value[0].temp,
		cloudPath: fileName,
		onUploadProgress: event=>{
		  pictures.value[0].progress = Math.round(
		    (event.loaded * 100) / event.total);
		}
	})
	pictures.value[0].status = 2; // 上传完成
	let path = cloudToHttps(cloud.fileID)
	pictures.value[0].fileID = cloud.fileID
	pictures.value[0].url = path
	
	emit("uploadFileUrl", path)
}

// 通过文件的云存储地址，获取对应的临时地址，避免通过getTempFileURL发起网络请求获取
const cloudToHttps = (str)=>{
	return str.replace("cloud://", "https://")
	.replace(str.split("/")[2], str.split("/")[2] + ".normal.cloudstatic.cn");	
}

// 点击关闭
const onClose = ()=>{
	pictures.value = [];
}
</script>

<style lang="scss" scoped>
	.layout{
		.head{
			.title {
				font-size: 34rpx;
				padding-left: 20rpx;
				position: relative;
				padding-bottom: 6rpx;
				.required{
					color: #f00;
					margin-left: 4rpx;
				}
			
				&::before {
					content: "";
					display: block;
					width: 8rpx;
					height: 30rpx;
					background: $brand-theme-color;
					position: absolute;
					left: 0;
					top: calc(50% - 15rpx);
					border-radius: 10rpx;
				}
			}
			.subTitle{
				font-size: 24rpx;
				color:$text-font-color-3;
			}
		}
		.body{
			// display: flex;
			width: 70%;
			height: 200rpx;
			// margin-left: 20rpx;
			// background: #f3f3f3;
			padding: 0 10rpx;
			// border-radius: 10rpx;
			// font-size: 20rpx;
			font-weight: 400;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;
			.box{
				width: 200rpx;
				aspect-ratio: 3 / 4;
				border-radius: 10rpx;
				position: relative;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					display: block;
				}
				.close{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					// width: 50rpx;
					// height: 50rpx;
					// background: rgba(0, 0, 0, 0.6);
					// color: #fff;
					// border-radius: 50%;
					// border: 1rpx solid #fff;
					padding: 5rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// border: 1rpx solid red;
				}
				.mask{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(0, 0, 0, 0.6);
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
			}
			.add{
				background: #eee;
				font-size: 90rpx;
				color: #333;
				display: flex;
				align-items: center;
				justify-content: center;
				// margin-bottom: 5rpx;
			}
			
		}
	}

</style>